JavaScript Drum Kit
仕様
キーに関連付けられた音を鳴らす(A, S, ..., K, L)
ボタンを押したときに、ボタンの枠を黄色く、大きくさせる
.key
transition 0.07s
.playing
ボタンの枠を黄色にする
大きくする (1.1倍)
背景
画像
https://gyazo.com/7e347b50371f47a4ccf5007fce5a2cb2
背景の下が切れないようにする
bodyのmarginを0にしたらOK
code:css
body {
margin: 0;
}
背景画像のサイズをウィンドウサイズに合わせる
code:css
body {
background-size: cover;
}
背景画像を繰り返さないようにする
code:css
body {
background-repeat: no-repeat;
}
背景画像の高さと幅を固定する(windowサイズを変更したときに、背景画像の大きさを変えないようにしたい)
code:css
html, body {
height: 100%;
width: 100%;
background-image: ...;
}
背景画像の中央が、常にウィンドウの中央に位置するようにする
code:css
body {
background-position: center; /* center center と同義 */
}
背景画像を透過っぽくさせる
code:css
background-image: /* */;
background-color: rgba(255, 255, 255, 0.15);
background-blend-mode: lighten;
ボタン
処理
キーを押して光らせた後に元に戻す
わからなかったので、リポジトリを確認したrmaruon.icon
方法
押したボタンのclassにplayingを動的に追加する
code:js
Elem.classlist.add('playing');
ボタンにtransitionを設定する
code:css
{
transition: all 0.07s ease;
}
すべてのキーのイベントリスナーに「transitionが終了したときに、classからplayingを削除する」と設定する
code:js
Elem.addEventListner('transitionend', removePlayingClass, false);
function removePlayingClass() {
this.classlist.remove("playing");
}
ボタンを押した後にパッドを大きくする
code:css
{
transform: scale(1.1);
}
考慮していなかった処理
一番処理が長いtransitionEventに着目して、そのtransitionendに.playingを削除する
audioタグが存在しないキーを入力したときに、処理を実行しないようにする
権利上の問題でやめた